import { reactive, ref } from 'vue';

export default function(carouselRef) {
    type CarouseInfo = {
      x: number[];
      y: number[];
      z: number[];
      opacity: number[];
    };
    const carouselInfo = reactive<CarouseInfo>({
      x: [],
      y: [],
      z: [],
      opacity: []
    });
    const baseParams = {
      x: 150,
      xOffset: -300,
      y: -25,
      yOffset: 50,
      opacity: 0.6,
      opacityOffset: 0.2,
    };
    const carouselList = ref([
      {
        id: 1,
        url: ''
      },
      {
        id: 2,
        url: ''
      },
      {
        id: 3,
        url: ''
      },
      {
        id: 4,
        url: ''
      }
    ])
  const methods = {
    clickArrow(arrowType: string) {
      const x = methods.switchPosition(carouselInfo.x, arrowType);
      const y = methods.switchPosition(carouselInfo.y, arrowType);
      const z = methods.switchPosition(carouselInfo.z, arrowType);
      const opacity = methods.switchPosition(carouselInfo.opacity, arrowType);
      Array.from(carouselRef.value.children).forEach((item, index) => {
        (item as HTMLDivElement).style.zIndex = z[index].toString();
        (window as any).anime({
          targets: item as HTMLDivElement,
          translateX: x[index],
          rotateY: y[index],
          scale: opacity[index],
          opacity: opacity[index],
          easing: 'linear',
        });
      })
    },
    switchPosition(val: number[], type = 'right') {
      const target = type === 'right' ? val.shift() : val.pop();
      type === 'right' ? val.push(target!) : val.unshift(target!);
      return val;
    },
    computedStyle(i: number) {
      const { opacity, opacityOffset, xOffset, yOffset } = baseParams;
      let z = 0;
      let opacityNum = 0;
      let x = i * baseParams.x + xOffset;
      let y = i * baseParams.y + yOffset;
      const centerIndex = (carouselList.value.length - 1) / 2;
      if (i <= centerIndex) {
        z = i * 5;
        opacityNum = i * opacityOffset + opacity;
      } else {
        const baseIndex = i - centerIndex * (i - centerIndex);
        z = baseIndex * 5;
        opacityNum = baseIndex * opacityOffset + opacity;
      }
      carouselInfo.x.push(x);
      carouselInfo.y.push(y);
      carouselInfo.z.push(z);
      carouselInfo.opacity.push(opacityNum);
      return {
        transform: `translateX(${x}px) rotateY(${y}deg) scale(${opacityNum})`,
        zIndex: z,
        opacity: opacityNum,
      };
    }
  }
  return {
    methods,
    carouselList
  }
}
